<template>
  <!-- 随堂练习实验批阅 -->
  <div id="marking-test" v-if="resData">
    <!-- 调整相似度-查重设置弹出框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="30%">
      <p class="check-tishi">
        <i class="el-icon-warning"></i>批量控制所有学生提交的实验报告重复率检查比率
      </p>
      <p class="dialog-b">实验报告代码查重校验
        <el-switch v-model="dialogCheckSwitch"></el-switch>
      </p>
      <!-- 关闭相似度不显示 -->
      <p v-if="dialogCheckSwitch">实验报告相似度高于
        <el-select class="dialog-check-value" v-model.number="resData.reportDuplicatePercent" placeholder="请选择">
          <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-input @keyup.native="provingCount(resData,'reportDuplicatePercent')" class="dialog-check-value" v-model.number="resData.reportDuplicatePercent"></el-input> -->
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="sameSubmit">保存</el-button>
        <br>
        <br>
      </span>
    </el-dialog>
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div v-if="resData">
            <span class="preview-title">{{ resData.courseName }}</span>
            <span class="preview-line">/</span>
            <span>{{ resData.chapterName }}</span>
            <span>姓名：{{ resData.userName }}</span>
            <span>学号：{{ resData.userNumber }}</span>
          </div>
        </div>
      </div>
      <div class="preview-top2 jx-content">
        <div class="preview-top-content clearfix">
          <div class="fl">
            <span class="fs18">作业评分：
              <el-input @keyup.native="provingCount(resData,'score')" v-model.number="resData.score" class="preview-score"></el-input>
              分</span> &nbsp;
          </div>
          <div class="fr">
            <div @click="submitMarking" class="button-style">提交</div>
            <el-button :disabled="!resData.preview" @click="getPaper(resData.preview)" class="button-style">上一份</el-button>
            <el-button :disabled="!resData.next" @click="getPaper(resData.next)" class="button-style">下一份</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content preview-content" v-if="resData">
      <div class="marking-test-title c-blue">在线版实验报告</div>
      <div v-if="resData.reportContents">
        <div class="ex-answer markdown-body" v-html="resData.reportContents"></div>
      </div>
      <div v-else class="nodata-box">暂未提交报告，请查看word版</div>
      <div class="marking-test-title c-blue">word版实验报告</div>
      <div v-if="resData.reportAddress">
        <div class="clearfix">
          <div class="fl">
            <span class="c-gray">{{resData.reportName}}</span>
            <a href="javascript:;" @click="downloadModel(resData)">下载</a>
          </div>
          <div class="fr">
            <div @click="dialogCheck = true;" class="button-style">调整相似度</div>
          </div>
        </div>
        <div v-if="resData.checkReportDuplicate && (resData.resultList !== undefined && resData.resultList.length)" class="same-content" :class="{'same-content-hidden':sameContentShow}">
          <ul v-if="resData.resultList.length">
            <li v-for="(item,index) in resData.resultList" :key="index">
              <span>该学生与{{ item.userName }}同学代码相似度高达</span>
              <div class="progress">
                <el-progress :percentage="item.percent"></el-progress>
              </div>
              <a href="javascript:;" @click="$downloadfile.download(item.url,item.reportName)">下载{{ item.userName }}实验报告</a>

              <!-- <a :href="item.url">下载与{{ item.userName }}同学相似报告</a> -->
            </li>
          </ul>
          <div v-if="resData.resultList.length > 3" @click="sameContentShow = !sameContentShow" class="show-same-content" :class="{'same-content-hidden-icon':!sameContentShow}"></div>
        </div>
      </div>
      <div v-else>暂未提交报告，请查看在线版</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      optionsRepeat: [
        {
          value: 90,
          label: "90%"
        },
        {
          value: 80,
          label: "80%"
        },
        {
          value: 70,
          label: "70%"
        },
        {
          value: 60,
          label: "60%"
        },
        {
          value: 50,
          label: "50%"
        },
        {
          value: 40,
          label: "40%"
        },
        {
          value: 30,
          label: "30%"
        },
        {
          value: 20,
          label: "20%"
        },
        {
          value: 10,
          label: "10%"
        }
      ],
      //查重设置弹出框
      dialogCheck: false,
      editExperimental: {
        radio: "1"
      },
      //查重设置开关
      dialogCheckSwitch: false,
      //箭头 展开更多
      sameContentShow: true,
      paramsData: {},
      //班级id
      classId: this.$route.query.id,
      //章节id
      chapterId: this.$route.query.chapterId,
      //页面带过来的id
      reportId: "",
      //接收的题目列表
      resData: "",
      //发送的数据
      //reqData:'',
      //选择题
      questionList1: null,
      //判断题
      questionList2: null,
      //填空题
      questionList3: null,
      //简答题
      questionList4: null,
      //编程题
      questionList5: null,
      qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      judgekey: ["错误", "正确"],
      questionNumber: ["一", "二", "三", "四", "五", "六"],
      questionName: [
        {
          type: 1,
          name: "选择题"
        },
        {
          type: 2,
          name: "判断题"
        },
        {
          type: 3,
          name: "填空题"
        },
        {
          type: 4,
          name: "简答题"
        },
        {
          type: 5,
          name: "编程题"
        },
        {
          type: 6,
          name: "实验题"
        }
      ]
    };
  },
  created() {
    this.getReportId();
  },
  watch: {
    //监听查重开关
    dialogCheckSwitch(val, o) {
      //如果查重开启
      if (val === true) {
        console.log(123123);
      }
    }
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //下载修改文件名
    downloadModel(resData) {
      let that = this;
      that.$downloadfile.download(resData.reportAddress, resData.reportName);
    },

    //获取reportId
    getReportId() {
      let localStorage = window.localStorage;
      this.reportId = localStorage.getItem("reportId");
      if (this.reportId === null) {
        //this.$router.push('/Teaching/MyCourses/studentsSubmitDetailsListTest');
        return;
      }
      this.getPaper(this.reportId);
    },
    //选择题多选是否填写
    isChoseNull(item2, index2) {
      //是数组
      if (item2.userAnswer instanceof Array) {
        return !item2.userAnswer.length;
      } else {
        //不是数组
        return item2.userAnswer && item2.userAnswer !== "empty";
      }
    },
    //调整相似度点击保存
    sameSubmit() {
      let that = this;
      that.dialogCheck = false;
      let dialogCheckSwitch = that.dialogCheckSwitch;
      console.log(dialogCheckSwitch, 1);
      if (dialogCheckSwitch) {
        that.resData.checkReportDuplicate = true;
        that.dialogCheckSwitch = true;
      } else {
        that.resData.checkReportDuplicate = false;
        that.dialogCheckSwitch = false;
      }
      that.getSameList(that.resData.reportDuplicatePercent);
    },
    //获取相似度列表
    getSameList(val) {
      let that = this;
      let reqData = {
        checkReportDuplicate: that.dialogCheckSwitch,
        reportDuplicatePercent: val
      };
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/duplicate-percent",
          reqData
        )
        .then(function(res) {
          console.log("成功");
          console.log(res, 110);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.getPaper(that.resData.id);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //限制input框只能输入正整数 并且不能超出指定分数
    provingCount(item, prop) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        that.$message.warning("只能输入整数");
      }
      if (item[prop] > 999) {
        item[prop] = "";
        that.$message.warning("分数不能超过三位数");
      }
    },
    //获取试题
    getPaper(id) {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "玩命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/2/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId +
            "/student/" +
            id
        )
        .then(function(res) {
          loading.close();
          console.log("成功");
          console.log(res, 110);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //滚动条置顶
              $("html,body").scrollTop(0);
              that.resData = res.data.data;
              //赋值是否查重
              that.dialogCheckSwitch = that.resData.checkReportDuplicate;
              console.log(that.resData, 666);
              window.localStorage.setItem("reportId", id);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          loading.close();
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //提交批阅
    submitMarking() {
      var that = this;
      axios
        .post(
          ///course/{courseId}/check/class/type/{type}/{classId}/chapter/{chapterId}/student/{id}
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/2/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId +
            "/student/" +
            that.resData.id,
          { score: that.resData.score }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "提交成功",
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#marking-test {
  img{
    max-width:100%;
  }
  .nodata-box{
    box-shadow: none;
  }
  .ex-answer {
    background: #f6f6f6;
    padding: 18px;
    margin: 18px 0;
    // color: #727272;
  }
  background: #f8f8f8;
  .dialog-check {
    .dialog-check-value {
      width: 80px;
      input {
        width: 80px;
      }
    }
    p {
      line-height: 60px;
      text-align: center;
    }
    .check-tishi{
      i {
        padding: 0 10px;
        font-size: 20px;
        color: $btn-blue;
      }
    }
    .dialog-b {
      margin-left: -27px;
    }
    .el-dialog__footer {
      text-align: center;
    }
    .el-select .el-input__inner {
      width: 80px;
    }
  }
  .marking-test-title {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #e8e8e8;
    line-height: 60px;
    margin-bottom: 14px;
  }
  .c-gray {
    color: #727272;
  }
  .same-content-hidden {
    height: 165px;
    overflow: hidden;
  }
  .same-content {
    border: 1px solid #cacaca;
    width: 800px;
    box-sizing: border-box;
    padding: 30px 22px;
    margin-top: 40px;
    position: relative;
    li {
      display: flex;
      padding: 10px 0;
      justify-content: space-between;
      .progress {
        width: 270px;
        .el-progress-bar {
          width: 218px;
          padding-right: 10px;
          margin-right: 0;
        }
        .el-progress__text {
          margin-left: 0;
        }
      }
    }
    .show-same-content {
      position: absolute;
      width: 100%;
      height: 40px;
      text-align: center;
      background: #fff;
      left: 0;
      bottom: 0;
      cursor: pointer;
      &:after {
        font-family: "element-icons" !important;
        content: "\e603";
      }
    }
    .same-content-hidden-icon {
      &:after {
        font-family: "element-icons" !important;
        content: "\e605";
      }
    }
  }
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  //选择题答案下划线
  .chose-item {
    text-decoration: underline;
    padding: 0 4px;
  }
  .question-score {
    .el-input {
      width: auto;
      .el-input__inner {
        width: 50px;
      }
    }
  }
  .preview-top {
    position: relative;
    z-index: 2;
    height: 120px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 60px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .preview-score {
          width: 80px;
          input {
            width: 80px;
          }
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 40px auto 20px;
    color: $title-gray;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    p {
      display: inline;
    }
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
}
</style>
